var reBtn = document.querySelector('.reBtn')
var leBtn = document.querySelector('.leBtn')
function animate(ele,obj,stop){
    var index = 0;
    for(var key in obj){
        (function(key){
            index++
            var style = getComputedStyle(ele)[key]
            style = key === 'opacity' ? style * 100 : parseInt(style)
            var target = obj[key]
            target = key === 'opacity'? target * 100 : parseInt(target)
            var step = (target - style) / 50
            step = step < 0 ? Math.ceil(step) : Math.floor(step)
            var timer = setInterval(function(){
                style += step;
                ele.style[key] = style + (key === 'opacity'? style / 100 : 'px')
                if(style === target){
                    clearInterval(timer)
                    index--
                    if(index === 0){
                        stop()
                    } 
                }
            },10)
        })(key)
    }
}
var onOff = true
reBtn.onclick = function(){
    var swipePage = this.parentNode.parentNode
    if(onOff){
        onOff = false;
        animate(swipePage,{
            'width': '3000px',
        },function(){
            animate(swipePage,{
                'left':'500px',
                width:'1000px'
            },function(){
                onOff = true;

            })
        })
    }
}
leBtn.onclick = function(){
    var swipePage = this.parentNode.parentNode
    if(onOff){
        onOff = false;
        animate(swipePage,{
            'width': '3000px',
        },function(){
            animate(swipePage,{
                'left':'-500px',
                width:'1000px'
            },function(){
                onOff = true;
            })
        })
    }
}
axios.defaults.baseURL = 'http://localhost:8888'
var regBtn = document.querySelector('.regBtn')
regBtn.onclick = function(){
    axios.post('/users/register',{
        username:this.parentNode.querySelector('input[placeholder="username"]').value,
        password:this.parentNode.querySelector('input[placeholder="password"]').value,
        rpassword:this.parentNode.querySelector('input[placeholder="password again"]').value,
        nickname:this.parentNode.querySelector('input[placeholder="nickname"]').value,
    },{headers:{
        'content-type':'application/x-www-form-urlencoded'
    }}).then(res => {
        console.log(res)
        if(res.data.code !== 1){
            alert('注册失败' + res.data.message)
        }
        var inputs = this.parentNode.querySelectorAll('input')
        for(var i = 0;i<inputs.length;i++){
            inputs[i].value = ''
        }
    })
}
var loBtn = document.querySelector('.loBtn')
loBtn.onclick = function(){
    axios.post('/users/login',{
        username:this.parentNode.querySelector('input[placeholder="username"]').value,
        password:this.parentNode.querySelector('input[placeholder="password"]').value
    },{
        headers:{
            'content-type':'application/x-www-form-urlencoded'
        }
    }).then(res => {
        console.log(res)
        if(res.data.code !== 1){
            alert('登录失败' + res.data.message)
        }
        var inputs = this.parentNode.querySelectorAll('input')
        localStorage.setItem('token',res.data.token)
        localStorage.setItem('id',res.data.user.id)
        for(var i = 0;i<inputs.length;i++){
            inputs[i].value = ''
        }
        setTimeout(() => {
            location.href = 'personal.html'
        },1000)
    })
}